{% load static %}
<!doctype html>
<html lang="en" data-theme="dark">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'artworks/pico/css/pico.min.css'%}">
    <script src="{% static 'artworks/pico/js/commons.min.js'%}"></script>
    <title>UI DEMO PICO</title>
</head>

<body>
    <main class="container">
        <div>
            <h2>1. 黑白样式切换</h2>
            <button class="contrast switcher theme-switcher" aria-label="Turn off dark mode">Turn off dark mode</button>
            <p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code>
                or
                on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code></p>
        </div>

        <div>
            <h2>2. 标题和引用</h2>
            组合标题
            <article aria-label="Blockquote example">
                <div class="headings">
                    <h2>Heading 2</h2>
                    <h3>Subtitle for heading 2</h3>
                </div>
                <footer>
                    <pre><code>
&lt;<b>hgroup</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>hgroup</b>&gt;
                    </code></pre>
                </footer>
            </article>
            <article aria-label="Blockquote example">
                <blockquote>"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."<footer><cite>- Phasellus eget lacinia</cite></footer></blockquote><footer class="code"><pre><code>&lt;<b>blockquote</b>&gt;
                "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
                Nam at dui sit amet ipsum cursus ornare."
                &lt;<b>footer</b>&gt;
                  &lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
                &lt;/<b>footer</b>&gt;
              &lt;/<b>blockquote</b>&gt;</code></pre></footer>
            </article>
        </div>

        <div>
            <h2>3. 按钮样式</h2>
            <code>
                <p>&lt;button&gt;Button&lt;/button&gt;</p>
                    <p>&lt;input type="submit"&gt;</p>
                    <p>&lt;a href="#" role="button"&gt;Link&lt;/a&gt;</p>
                    <p>&lt;a href="#" role="button" class="secondary"&gt;Secondary&lt;/a&gt;</p>
                    <p>&lt;a href="#" role="button" class="outline"&gt;Primary&lt;/a&gt;</p>
            </code>
            <button>Button</button>
            <input type="submit">
            <a href="#" role="button"   data-tooltip="提示信息">Link</a>
            <a href="#" role="button" class="secondary">Secondary</a>
            <a href="#" role="button" class="outline">Primary</a>
        </div>
    </main>
</body>

</html>